<!DOCTYPE html>
<html lang="zh-CN" class="">
  
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>会员中心-我的商城</title>
	<meta name="description" content="会员中心，我的商城">
    <meta name="Keywords" content="魅族手机官网商城、魅族官方在线商店、魅族在线商城、魅族官网在线商店、魅族商城、魅蓝商城">
	<link href="/static/myhome/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
	<link href="/static/myhome/public/img/favicon.ico" rel="icon" type="image/x-icon">
	<!-- Bootstrap -->
	<link href="/static/myhome/public/css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="/static/myhome/public/js/jquery-1.12.4.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="/static/myhome/public/js/bootstrap.min.js"></script>
	<!-- 兼任ie9以下 -->
	<!--[if lt IE 9]>
	  <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
	  <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	<!-- 自定义 -->
	<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/global.css">
	<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/app.css">
	
	<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/member.css">
	<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/member-app.css">
	
	<script type="text/javascript" src="/static/myhome/public/js/rem.js"></script>
	<script type="text/javascript" src="/static/myhome/public/js/topNav.js"></script>
</head>
  
<body class="member-app" style="padding-top:0">
    <!-- 主内容区域 -->
    <div class="mainbody order">
		<div class="container">
			<!-- 面包屑导航 -->
			<div class="crumbs ">
				<ol class="breadcrumb">
					<li class="hidden-xs hidden-sm"><a href="/">首页</a></li>
					<!--<li class="active"><a href="#">我的商城</a></li>-->
				</ol>
			</div><!-- 面包屑导航 E-->
			
			<div class="main clearfix">
				<!-- 左侧导航 -->
				<div class="left-nav f-fl hidden-xs hidden-sm">
					<div class="nav-main">
						<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
						<a href="{% url 'member_order'%}" class="ml" >我的订单</a>
						<a href="#" class="ml " >我的回购单</a>
						<a href="#" class="ml " >我的意外保</a>
						<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
						<a href="#" class="ml " >地址管理</a>
						<a href="#" class="ml " >我的收藏</a>
						<a href="#" class="ml " >消息提醒</a>
						<a href="#" class="ml ">建议反馈</a>
					</div>
				</div><!-- 左侧导航 E-->
				<!-- 右侧内容展示 -->
				<div class="right-content f-fr col-xs-12 col-sm-12">
					<div class="index-main">
						<div class="top clearfix">
							<div class="information clearfix f-fl col-xs-12 col-sm-12">
								<div class="pic f-fl">
								  <img src="public/img/member/m01.jpg" alt="">
								</div>
								<div class="name f-fl">
									<span>{{user.nikename}}</span>
									<span>欢迎您回来！</span>
								</div>
								<div class="info f-fl">
									<ul>
										<li>Flyme账号：暂无<span></span></li>
										<li>绑定手机号：<span>{{user.phone}}</span></li>
										<li class="emailText">绑定邮箱：<span>{{user.email |default:'暂无'}}</span></li>
									</ul>
									<a class="edit" id="change" href="javascript:void(0);">修改个人信息 &gt;</a>
								</div>
							</div>
							<div class="backCouponNum f-fl col-xs-12 col-sm-12">
								<p>回购券：<span>0</span></p>
							</div>
						</div>
						<div class="bottom clearfix">
							<div class="orderState f-fl col-xs-12 col-sm-12">
								<div class="title clearfix">
									<span class="f-fl">订单状态</span>
									<a class="detail f-fr" href="{% url 'member_order'%}">查看全部订单 &gt;</a>
								</div>
								<div class="content">
									<div class="waitPay clearfix">
										<span class="f-fl cercl">
											<span class="glyphicon glyphicon-folder-open iconfont" aria-hidden="true"></span>
										</span>
										<div class="text f-fl">
											<p>待付款订单：<span class="num">{{order.payno}}</span></p>
											<a class="detail" href="{% url 'member_order'%}?status=0">查看全部待付款订单 &gt;</a>
										</div>
									</div>
									<div class="waitDeliver clearfix">
										<span class="f-fl cercl">
											<span class="glyphicon glyphicon-folder-close iconfont" aria-hidden="true"></span>
										</span>
										<div class="text f-fl">
											<p>已经付款订单：<span class="num">{{order.payok}}</span></p>
											<a class="detail" href="{% url 'member_order'%}?status=1">查看全部已经付款订单 &gt; </a>
										</div>
									</div>
								</div>
							</div>
							<div class="message f-fl col-xs-12 col-sm-12">
								<div class="title clearfix">
									<span class="f-fl">活动消息</span>
									<a class="f-fr detail" href="#">查看全部消息 &gt;</a>
								</div>
								<div id="tableList" class="list J_no_data"><span>您暂无此类消息提醒！</span></div>
							</div>
						</div>
					</div>

					
				</div>
			</div>
		</div>	
	</div>
    <!-- 主内容区域 E-->
	
    <!-- 底部区域 -->
    <footer class="layout-footer  hidden-xs hidden-sm">
		<div class="container">
			<div class="layout-footer-top clearfix">
				<ul class="layout-footer-services clearfix">
					<li class="layout-footer-services-item">
					  <a href="#" class="layout-footer-services-link" target="_blank">
						<span class="layout-footer-service-wrap">
						  <i class="glyphicon glyphicon-sd-video"></i>
						</span>
						<span class="layout-footer-services-text">顺丰包邮</span></a>
					</li>
					<li class="layout-footer-services-item">
					  <a href="#" class="layout-footer-services-link" target="_blank">
						<span class="layout-footer-service-wrap">
						  <i class="glyphicon glyphicon-flash"></i>
						</span>
						<span class="layout-footer-services-text">100+ 城市次日送达</span></a>
					</li>
					<li class="layout-footer-services-item">
					  <a href="#" class="layout-footer-services-link" target="_blank">
						<span class="layout-footer-service-wrap">
						  <i class="glyphicon glyphicon-repeat"></i>
						</span>
						<span class="layout-footer-services-text">7 天无理由退货</span></a>
					</li>
					<li class="layout-footer-services-item">
					  <a href="#" class="layout-footer-services-link" target="_blank">
						<span class="layout-footer-service-wrap">
						  <i class="glyphicon glyphicon-refresh"></i>
						</span>
						<span class="layout-footer-services-text">15 天换货保障</span></a>
					</li>
					<li class="layout-footer-services-item">
					  <a href="#" class="layout-footer-services-link" target="_blank">
						<span class="layout-footer-service-wrap">
						  <i class="glyphicon glyphicon-wrench"></i>
						</span>
						<span class="layout-footer-services-text">1 年免费保修</span></a>
					</li>
					<li class="layout-footer-services-item">
					  <a href="#" class="layout-footer-services-link" target="_blank">
						<span class="layout-footer-service-wrap">
						  <i class="glyphicon glyphicon-map-marker"></i>
						</span>
						<span class="layout-footer-services-text">2300+ 线下体验店</span></a>
					</li>
					<li class="layout-footer-services-item">
					  <a href="#" class="layout-footer-services-link" target="_blank">
						<span class="layout-footer-service-wrap">
						  <i class="glyphicon glyphicon-sort"></i>
						</span>
						<span class="layout-footer-services-text">远程支持服务</span></a>
					</li>
					<li class="layout-footer-services-item">
					  <a href="#" class="layout-footer-services-link" target="_blank" data-mtype="wmz_public_foot_homerepair">
						<span class="layout-footer-service-wrap">
						  <i class="glyphicon glyphicon-home"></i>
						</span>
						<span class="layout-footer-services-text">上门快修</span></a>
					</li>
				</ul>
			  <div class="layout-footer-contact">
				<p class="layout-footer-contact-desc">24小时全国服务热线</p>
				<a href="tel:400-788-3333" class="layout-footer-contact-tel">400-788-3333</a>
				<p>
					<a href="javascript:void(0);" class="layout-footer-contact-online">
						<i class="layout-font layout-font-talk1"></i>
						<span class="text">在线客服</span>
					</a>
				</p>
			  </div>
			</div>
			<div class="layout-footer-bottom clearfix">
			<ul class="layout-footer-interlock clearfix">
				<li class="layout-footer-interlock-item">
					<a href="#" target="_blank" class="layout-footer-interlock-link">了解魅族</a></li>
				<li class="layout-footer-interlock-item">
					<a href="#" target="_blank" class="layout-footer-interlock-link">加入我们</a></li>
				<li class="layout-footer-interlock-item">
					<a href="#" target="_blank" class="layout-footer-interlock-link">联系我们</a></li>
				<li class="layout-footer-interlock-item">
					<a href="#" target="_blank" class="layout-footer-interlock-link">Flyme</a></li>
				<li class="layout-footer-interlock-item">
					<a href="#" target="_blank" class="layout-footer-interlock-link">魅族社区</a></li>
				<li class="layout-footer-interlock-item">
					<a href="#" target="_blank" class="layout-footer-interlock-link">天猫旗舰店</a></li>
				<li class="layout-footer-interlock-item">
					<a href="#" target="_blank" class="layout-footer-interlock-link">问题反馈</a></li>
				<li class="layout-footer-interlock-item">
					<a href="#" target="_blank" class="layout-footer-interlock-link">线上销售授权名单公示</a>
				 </li>
			</ul>
			<div class="layout-footer-copyright clearfix">
				<span class="layout-footer-copyright-left">
					<a class="layout-footer-copyright-link copyright-text">&copy;2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</a>
					<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">粤ICP备13003602号-2</a>
					<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">合字B2-20170010</a>
					<a class="layout-footer-copyright-link" hidefocus="true" href="#" target="_blank">营业执照</a>
					<a class="layout-footer-copyright-link" hidefocus="true" href="3" target="_blank">法律声明</a>
					<a class="layout-footer-copyright-link">粤公网安备 44049102496009 号</a>
					<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
						<i class="layout-icon layout-icon-license"></i>
					</a>
					<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
						<i class="layout-icon layout-icon-wel"></i>
					</a>
					<a class="layout-footer-copyright-link" hidefocus="true" href="#" rel="nofollow" target="_blank">
						<i class="layout-icon layout-icon-trust"></i>
					</a>
				</span>
				<ul class="layout-footer-media clearfix">
					<li class="layout-footer-media-item">
						<a href="http://weibo.com/meizumobile" class="layout-footer-media-link">
							<i class="layout-font layout-font-weibo"></i>
						</a>
					</li>
					<li class="layout-footer-media-item">
						<a href="javascript:void(0);" class="layout-footer-media-link wechat">
							<i class="layout-font layout-font-wechat"></i>
							<div class="layout-footer-media-wechat-qrcode">
								<img class="layout-footer-media-wechat-img" src="" alt="微信二维码">
							</div>
						</a>
					</li>
					<li class="layout-footer-media-item">
						<a href="#" class="layout-footer-media-link">
							<i class="layout-font layout-font-qzone"></i>
						</a>
					</li>
				</ul>
			</div>
		</div>
    </footer>
    <!-- 底部区域 E -->
    <!-- 返回顶部 -->
    <div class="layout-magnet layout-magnet-show">
		<div class="layout-magnet-item layout-magnet-item-top">
			<a href="javascript:void(0);" class="layout-magnet-link" data-mtype="wmz_public_cbxf_top">
				<div class="layout-magnet-icon">
					<i class="glyphicon glyphicon-menu-up"></i>
				</div>
			</a>
		</div>
    </div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" id="box" style="display:none">Open modal for @mdo</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form action="{% url 'member_save'%}" method="POST" enctype="multipart/form-data">
            {% csrf_token %}
          <div class="form-group">
            <label for="recipient-name" class="control-label">修改邮箱:</label>
            <input type="text" class="form-control" id="recipient-name" name="email">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">修改密码:</label>
             <input type="password" class="form-control" id="password" name="password">
          </div>
            <img id="showImg" src="" width="300px"/>
		<br />
		<!--下面的隐藏域主要用来改变file类型的input的值，但是file类型的input的值出于安全考虑不让修改，但是表单提交后需要处理该值(放置图片路径)来显示服务器上的图片-->
		<input type="hidden" id="img"/>
		请选择上传图片：<input type="file" id="uploadImg" onchange="selectImg(this);" name="pic" multiple=""/>
            <script type="text/javascript">
	var image = '';
	var canvas;
	var base64; //将canvas压缩为base64格式
	function selectImg(file) {
		if (!file.files || !file.files[0]) {
			return;
		}
		var reader = new FileReader(); //读取文件
		reader.onload = function(event) { //文件读取完成的回调函数
			image = document.getElementById('showImg');
			image.src = event.target.result; //读入文件的base64数据(可直接作为src属性来显示图片)
			//alert(event.target.result);
			//图片读取完成的回调函数（必须加上否则数据读入不完整导致出错！）
			image.onload = function() {
				canvas = convertImageToCanvas(image); //图片转canvas
				base64 = canvas.toDataURL('image/jpeg'); //将图片数据转为base64.
				//alert(base64);
				$.post(
					"/server_interface_url/", //服务器接口(返回图片路径)
					{
						data: base64
					},
					function(data) {
						alert(data.target);
						//alert(eval(data));
						//修改上传文件的路径名字(图片完整路径)
						$('#img').val('http://path/' + data.target);
					}, "json");
			}
		}
		//将文件已Data URL的形式读入页面
		reader.readAsDataURL(file.files[0]);
	}
	// 把image 转换为 canvas对象
	function convertImageToCanvas(image) {
		// 创建canvas DOM元素，并设置其宽高和图片一样
		var canvas = document.createElement("canvas");
		canvas.width = image.width;
		canvas.height = image.height;
		// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
		canvas.getContext("2d").drawImage(image, 0, 0);

		return canvas;
	}
</script>

            <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button class="btn btn-primary" id="save">保存</button>
      </div>
        </form>
      </div>

    </div>
  </div>
</div>
    <!-- 返回顶部 E-->
	<script type="text/javascript">//回顶部
      		backTop();
      		//全选

      		$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('修改个人信息')
  modal.find('.modal-body input').val()
})
$('#change').click(function(){
    $('#box').click()
})

	</script>
</body>

</html>